<template>
  <div id="Myschedule_container" style="height: 98%">
    <el-card>
      <div class="searchDiv">
        <div class="searchDivLeft">
          日程類別:
          <el-select v-model="Search.searchbean.stId" placeholder="一時的に日程類別無し">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
          >&nbsp; 日程テーマ: <el-input v-model="Search.searchbean.stittle" placeholder=""></el-input>&nbsp; 日程時間:
          <el-date-picker v-model="value1" type="daterange" value-format="YYYY-MM-DD" format="YYYY-MM-DD" range-separator="至" start-placeholder="開始期日" end-placeholder="終了期日"> </el-date-picker
          >&nbsp;
          <el-button type="primary" v-preventReClick icon="el-icon-search" @click="Searchmyschedule()">検索</el-button>
        </div>
        <div class="searchDivRight">
          <el-button type="primary" v-preventReClick icon="el-icon-plus" @click="dialogFormVisible = true">新規</el-button>
          <el-button type="warning" v-preventReClick icon="el-icon-edit" @click="Revisemyschedule()">修正</el-button>
          <el-button type="danger" v-preventReClick icon="el-icon-delete" @click="deletemyschedule()">削除</el-button>
          <el-dialog title="日程新規" v-model="dialogFormVisible" @close="resetForm('myschedule')" destroy-on-close>
            <el-form :model="myschedule" :rules="rules" ref="myschedule">
              <el-form-item label="会社名称" prop="groupEnterpriseGuid" :label-width="formLabelWidth">
                <!-- <el-input v-model="myschedule.groupEnterpriseGuid" autocomplete="off" disabled="ture"></el-input> -->
                <el-select v-model="myschedule.groupEnterpriseGuid" placeholder=" " class="dialog_detail">
                  <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日程の類別" prop="stId" :label-width="formLabelWidth">
                <el-select v-model="myschedule.stId" placeholder=" " class="dialog_detail">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日程のテーマ" prop="stittle" :label-width="formLabelWidth">
                <el-input maxlength="200" v-model.trim="myschedule.stittle" autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="日程の内容" prop="scontent" :label-width="formLabelWidth">
                <el-input maxlength="500" v-model="myschedule.scontent" type="textarea" autosize autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="日程の場所" prop="saddress" :label-width="formLabelWidth">
                <el-input maxlength="200" v-model="myschedule.saddress" autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="緊急程度" prop="surgent" :label-width="formLabelWidth">
                <el-select v-model="myschedule.surgent" class="dialog_detail" placeholder=" ">
                  <el-option label="普通" value="1"></el-option>
                  <el-option label="重要" value="2"></el-option>
                  <el-option label="緊急" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="開始期日" prop="sbdate" :label-width="formLabelWidth" style="float: left">
                <el-date-picker v-model="myschedule.sbdate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder=" " class="dialog_detail1"> </el-date-picker>
              </el-form-item>
              <el-form-item id="timewidth" label="時間" prop="sbtime" :label-width="formLabelWidth1">
                <el-time-picker v-model="myschedule.sbtime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder=" " class="dialog_detail1"> </el-time-picker>
              </el-form-item>
              <el-form-item label="終了期日" prop="sedate" :label-width="formLabelWidth" style="float: left">
                <el-date-picker v-model="myschedule.sedate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder=" " class="dialog_detail1"> </el-date-picker>
              </el-form-item>
              <el-form-item id="timewidth" label="時間" prop="setime" :label-width="formLabelWidth1">
                <el-time-picker v-model="myschedule.setime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder=" " class="dialog_detail1"> </el-time-picker>
              </el-form-item>
              <el-form-item label="リマインド方式" prop="sremindType" :label-width="formLabelWidth">
                <el-select v-model="myschedule.sremindType" class="dialog_detail">
                  <el-option label="しない" value="1"></el-option>
                  <el-option label="メッセージ" value="2"></el-option>
                  <el-option label="メール" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="myschedule.sremindType != '1'" label="リマインド時間" prop="sremindTime" :label-width="formLabelWidth">
                <el-select v-model="myschedule.sremindTime" class="dialog_detail" placeholder=" ">
                  <el-option label="さっそく" value="0"></el-option>
                  <el-option label="15分前に" value="1"></el-option>
                  <el-option label="30分前に" value="2"></el-option>
                  <el-option label="1時間前に" value="3"></el-option>
                  <el-option label="2時間前に" value="4"></el-option>
                  <el-option label="3時間前に" value="5"></el-option>
                  <el-option label="6時間前に" value="6"></el-option>
                </el-select>
              </el-form-item>
              <!-- 另一种写法，要有一个变量，noClick:true -->
              <!-- <el-button type="primary" icon="el-icon-circle-check" @click="$noMulClicks(submitmyschedule)" class="save">保存</el-button> -->
              <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="submitmyschedule()" class="save">保存</el-button>
            </el-form>
          </el-dialog>
          <el-dialog title="日程修正" v-model="dialogFormVisible1" @close="resetForm('update')" destroy-on-close>
            <el-form :model="update" :rules="rules" ref="update">
              <el-form-item label="会社名称" prop="groupEnterpriseGuid" :label-width="formLabelWidth">
                <!-- <el-input v-model="myschedule.groupEnterpriseGuid" autocomplete="off" disabled="ture"></el-input> -->
                <el-select v-model="update.groupEnterpriseGuid" placeholder=" " class="dialog_detail">
                  <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日程の類別" prop="stId" :label-width="formLabelWidth">
                <el-select v-model="update.stId" placeholder=" " class="dialog_detail">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日程のテーマ" prop="stittle" :label-width="formLabelWidth">
                <el-input maxlength="200" v-model.trim="update.stittle" autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="日程の内容" prop="scontent" :label-width="formLabelWidth">
                <el-input maxlength="500" v-model="update.scontent" type="textarea" autosize autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="日程の場所" prop="saddress" :label-width="formLabelWidth">
                <el-input maxlength="200" v-model="update.saddress" autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="緊急程度" prop="surgent" :label-width="formLabelWidth">
                <el-select v-model="update.surgent" class="dialog_detail" placeholder=" ">
                  <el-option label="普通" value="1"></el-option>
                  <el-option label="重要" value="2"></el-option>
                  <el-option label="緊急" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="開始期日" prop="sbdate" :label-width="formLabelWidth" style="float: left">
                <el-date-picker v-model="update.sbdate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder=" " class="dialog_detail1"> </el-date-picker>
              </el-form-item>
              <el-form-item id="timewidth" label="時間" prop="sbtime" :label-width="formLabelWidth1">
                <el-time-picker v-model="update.sbtime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder=" " class="dialog_detail1"> </el-time-picker>
              </el-form-item>
              <el-form-item label="終了期日" prop="sedate" :label-width="formLabelWidth" style="float: left">
                <el-date-picker v-model="update.sedate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder=" " class="dialog_detail1"> </el-date-picker>
              </el-form-item>
              <el-form-item id="timewidth" label="時間" prop="setime" :label-width="formLabelWidth1">
                <el-time-picker v-model="update.setime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder=" " class="dialog_detail1"> </el-time-picker>
              </el-form-item>
              <el-form-item label="リマインド方式" prop="sremindType" :label-width="formLabelWidth">
                <el-select v-model="update.sremindType" class="dialog_detail">
                  <el-option label="しない" value="1"></el-option>
                  <el-option label="メッセージ" value="2"></el-option>
                  <el-option label="メール" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="update.sremindType != 1" label="リマインド時間" prop="sremindTime" :label-width="formLabelWidth">
                <el-select v-model="update.sremindTime" class="dialog_detail" placeholder=" ">
                  <el-option label="さっそく" value="0"></el-option>
                  <el-option label="15分前に" value="1"></el-option>
                  <el-option label="30分前に" value="2"></el-option>
                  <el-option label="1時間前に" value="3"></el-option>
                  <el-option label="2時間前に" value="4"></el-option>
                  <el-option label="3時間前に" value="5"></el-option>
                  <el-option label="6時間前に" value="6"></el-option>
                </el-select>
              </el-form-item>
              <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="updatemyschedule()" class="save">保存</el-button>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <el-table :data="Searchlist" border style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <!-- style="width: 100%;color: #000000;"
        :header-cell-style="{background:'#f2f2f2',color:'#000000'}" -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="stTittle" label="日程類別"> </el-table-column>
        <el-table-column prop="stittle" label="日程テーマ"> </el-table-column>
        <el-table-column prop="scontent" label="日程内容"> </el-table-column>
        <el-table-column prop="saddress" label="日程場所"> </el-table-column>
        <el-table-column prop="surgent" label="緊急程度">
          <template #default="scope">
            <p v-if="scope.row.surgent == '1'">普通</p>
            <p v-if="scope.row.surgent == '2'">重要</p>
            <p v-if="scope.row.surgent == '3'">緊急</p>
          </template>
        </el-table-column>
        <el-table-column prop="sbtime" label="開始時間"> </el-table-column>
        <el-table-column prop="setime" label="終了時間"> </el-table-column>
        <el-table-column prop="sremindType" label="リマインド方式">
          <template #default="scope">
            <p v-if="scope.row.sremindType == '1'">しない</p>
            <p v-if="scope.row.sremindType == '2'">メッセージ</p>
            <p v-if="scope.row.sremindType == '3'">メール</p>
          </template>
        </el-table-column>
        <el-table-column prop="sremindTime" label="リマインド時間">
          <template #default="scope">
            <p v-if="scope.row.sremindTime == '0'">さっそく</p>
            <p v-if="scope.row.sremindTime == '1'">15分前に</p>
            <p v-if="scope.row.sremindTime == '2'">30分前に</p>
            <p v-if="scope.row.sremindTime == '3'">1時間前に</p>
            <p v-if="scope.row.sremindTime == '4'">2時間前に</p>
            <p v-if="scope.row.sremindTime == '5'">3時間前に</p>
            <p v-if="scope.row.sremindTime == '6'">6時間前に</p>
          </template>
        </el-table-column>
      </el-table>
      <div class="divider_pagination">
        <!-- <el-divider></el-divider> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Search.indexPage"
          :page-size="Search.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noClick: true,
      SearchstTittle: {
        searchbean: {
          stTittle: ''
        },
        indexPage: 1,
        pageSize: 10000
      },
      Search: {
        searchbean: {
          flg: '3',
          userid: this.$store.getters.showuserGuid,
          stTittle: '',
          stittle: '',
          groupEnterpriseGuid: '',
          sbdate: '',
          sedate: '',
          stId: ''
        },
        indexPage: 1,
        pageSize: 8
      },
      Searchlist: [],
      total: 0,
      multipleSelection: [],
      options1: [
        {
          value: '',
          label: '全部'
        }
      ],
      options2: [],
      options3: [],
      value1: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      myschedule: {
        // 集团下企业主键 グループの下の企業の主キー
        groupEnterpriseGuid: '',
        // 日程类别id スケジュールクラスid
        stId: '',
        // 日程主题 スケジュールのテーマ
        stittle: '',
        // 日程内容 スケジュールの内容
        scontent: '',
        // 日程地点 スケジュール場所
        saddress: '',
        // 紧急程度 緊急程度
        surgent: '',
        // 开始日期 開始期日
        sbdate: '',
        // 结束日期 终了期日
        sedate: '',
        // 开始时间 開始時間
        sbtime: '',
        // 结束时间 終了時間
        setime: '',
        // 提醒方式 リマインド方式
        sremindType: '1',
        // 提醒时间 リマインド時間
        sremindTime: '',
        // 提醒分钟数 リマインド分
        sremindMinute: '0',
        // 登录人的主键 登録者のメインキー
        userid: this.$store.getters.showuserGuid
        // 抄送人id列表 送信者idリスト
        // ccuserids: []
      },
      formLabelWidth: '120px',
      formLabelWidth1: '50px',
      innerVisible: false,
      EMname: '',
      rules: {
        groupEnterpriseGuid: [{ required: true, message: '会社を選択してください', trigger: 'change' }],
        stId: [{ required: true, message: '日程タイプを選択してください', trigger: 'change' }],
        stittle: [{ required: true, message: '日程のテーマを入力してください', trigger: 'blur' }],
        scontent: [{ required: true, message: '日程の内容を入力してください', trigger: 'blur' }],
        saddress: [{ required: true, message: '日程の場所を入力してください', trigger: 'blur' }],
        // ccuserids: [
        //   { required: true, message: '请选择抄送人', trigger: 'change' }
        // ],
        surgent: [{ required: true, message: '緊急程度を選択してください', trigger: 'change' }],
        sbdate: [{ type: 'date', required: true, message: '開始期日を選択してください', trigger: 'change' }],
        sedate: [{ type: 'date', required: true, message: '終了期日を選択してください', trigger: 'change' }],
        sbtime: [{ required: true, message: '開始時間を選択してください', trigger: 'change' }],
        setime: [{ required: true, message: '終了時間を選択してください', trigger: 'change' }],
        sremindType: [{ required: true, message: 'リマインド方式を選択してください', trigger: 'change' }],
        sremindTime: [{ required: true, message: 'リマインド時間を選択してください', trigger: 'change' }]
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 修正
      update: {
        // 日程id スケジュールid
        sid: '',
        groupEnterpriseGuid: '',
        stId: '',
        stittle: '',
        scontent: '',
        saddress: '',
        surgent: '',
        sbdate: '',
        sedate: '',
        sbtime: '',
        setime: '',
        sremindType: '',
        sremindTime: '',
        sremindMinute: '0',
        userid: this.$store.getters.showuserGuid
        // ccuserids: []
      },
      // 削除
      delete: {
        sids: []
      }
    }
  },
  created() {
    this.Searchid()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 监听 pagesize 改变的事件 ページサイズ変更イベントを聞く
    handleSizeChange(newSize) {
      console.log(newSize)
      this.Search.pageSize = newSize
      this.Searchmyschedule()
    },
    // 监听 页码值 改变的事件 ページ番号値変更イベントの監視
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.Search.indexPage = newPage
      this.Searchmyschedule()
    },
    // 检索企业id 企業idを検索する
    Searchid() {
      function id(value, label) {
        this.value = value
        this.label = label
      }
      this.axios
        .post('/role/selectAllEnterprise')
        .then((res) => {
          console.log(res)
          res.data.data.forEach((item) => {
            this.options3.push(new id(item.groupEnterpriseGuid, item.enterpriseName))
          })
          console.log(this.options3)
          this.SearchTittle()
          this.Searchmyschedule()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 检索日程类别 スケジュール別の検索
    SearchTittle() {
      function id(value, label) {
        this.value = value
        this.label = label
      }
      this.axios
        .post('/scheduletype/select/list', this.SearchstTittle)
        .then((res) => {
          console.log(res)
          res.data.data.list.forEach((item) => {
            this.options1.push(new id(item.stId, item.stTittle))
            this.options2.push(new id(item.stId, item.stTittle))
          })
          console.log(this.options1)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 检索
    Searchmyschedule() {
      console.log(this.value1)
      if (this.value1 != null) {
        this.Search.searchbean.sbdate = this.value1[0]
        this.Search.searchbean.sedate = this.value1[1]
      } else {
        this.Search.searchbean.sbdate = ''
        this.Search.searchbean.sedate = ''
      }
      console.log(this.Search)
      this.axios
        .post('/schedule/select/list', this.Search)
        .then((res) => {
          this.Searchlist = res.data.data.list
          this.total = res.data.data.total
          console.log(this.Searchlist)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 检索ccuserids抄送人id列表 送信者idリストを検索する
    // Searchccuserids () {
    //   this.innerVisible = true
    //   this.axios
    //     .post('/subgroup/treeUserInfo')
    //     .then((res) => {
    //       this.treeData = res.data.data.list
    //       console.log(this.treeData)
    //     })
    //     .catch((error) => {
    //       console.log(error)
    //     })
    // },

    // 新規
    submitmyschedule() {
      this.$refs.myschedule.validate((valid) => {
        // console.log("2秒内点击无数次，都只会触发一次")
        console.log(this.myschedule)
        if (valid) {
          if (this.myschedule.sedate < this.myschedule.sbdate) {
            return this.$message.warning('終了期日は開始期日より前にすることはできません')
          }
          if (this.myschedule.sedate == this.myschedule.sbdate && this.myschedule.setime <= this.myschedule.sbtime) {
            return this.$message.warning('終了時間は開始時間より前にすることはできません')
          }
          console.log(this.myschedule)
          this.axios
            .post('/schedule/insert', this.myschedule)
            .then((res) => {
              if (res.data.success !== 1) return this.$message.error(res.data.msg)
              this.$message.success(this.$getMsg('I0001'))
              // 定时器用来刷新页面 ページを更新するタイマー
              this.Searchmyschedule()
              this.dialogFormVisible = false
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    // 修正
    Revisemyschedule() {
      if (this.multipleSelection.length !== 1) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      }
      this.dialogFormVisible1 = true
      this.update.sid = this.multipleSelection[0].sid
      console.log(this.update.sid)
      this.options3.forEach((item) => {
        if (this.multipleSelection[0].groupEnterpriseGuid === item.value) {
          this.update.groupEnterpriseGuid = item.value
        }
      })
      // console.log(this.options3)
      this.options2.forEach((item) => {
        if (this.multipleSelection[0].stId === item.value) {
          this.update.stId = item.value
        }
      })
      // console.log(this.options2)
      this.update.stittle = this.multipleSelection[0].stittle
      this.update.scontent = this.multipleSelection[0].scontent
      this.update.saddress = this.multipleSelection[0].saddress
      this.update.surgent = this.multipleSelection[0].surgent
      // 截取字符串slice、substr、substring都可以用 文字列を切り取るslice、substr、substringが使える
      this.update.sbdate = this.multipleSelection[0].sbtime.substr(0, 10)
      console.log(this.update.sbdate)
      this.update.sbtime = this.multipleSelection[0].sbtime.substring(11, 19)
      this.update.sedate = this.multipleSelection[0].setime.substr(0, 10)
      this.update.setime = this.multipleSelection[0].setime.substring(11, 19)
      this.update.sremindType = this.multipleSelection[0].sremindType
      this.update.sremindTime = this.multipleSelection[0].sremindTime
    },
    updatemyschedule() {
      this.$refs.update.validate((valid) => {
        if (this.update.sedate < this.update.sbdate) {
          return this.$message.warning('終了期日は開始期日より前にすることはできません')
        }
        if (this.update.sedate == this.update.sbdate && this.update.setime <= this.update.sbtime) {
          return this.$message.warning('終了時間は開始時間より前にすることはできません')
        }
        if (this.update.sremindType == '1') {
          this.update.sremindTime = ''
        }
        if (valid) {
          this.axios
            .put('/schedule/update', this.update)
            .then((res) => {
              if (res.data.success !== 1) return this.$message.error(res.data.msg)
              this.$message.success(this.$getMsg('I0002'))
              this.Searchmyschedule()
              this.dialogFormVisible1 = false
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    // 削除
    deletemyschedule() {
      this.delete.sids = []
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      console.log(this.multipleSelection)
      this.multipleSelection.forEach((item) => {
        this.delete.sids.push(item.sid)
      })
      console.log(this.delete.sids)
      this.$confirm(this.$getMsg('I0004'), {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(
        () => {
          this.axios
            .delete('/schedule/delete', {
              data: this.delete
            })
            .then(() => {
              this.$message.success(this.$getMsg('I0003'))
              this.Searchmyschedule()
            })
            .catch((error) => {
              console.log(error)
            })
        },
        (res) => {
          console.log(res)
        }
      )
    }
  }
}
</script>

<style scoped>
.detail {
  height: 50px;
  /* background-color: #00FFFF; */
  margin-top: 10px;
}
.detail_rowleft {
  float: left;
}
.detail_rowright {
  float: right;
  padding-right: 6px;
  padding-top: 2px;
}

.el-divider {
  position: absolute;
  bottom: 75px;
  width: 1030px;
}
.el-select {
  width: 130px;
}
.el-input {
  width: 105px;
}
:deep(.el-range-editor--medium.el-input__inner) {
  width: 310px;
}

/* :deep(.el-range-editor--medium .el-range-separator) {
  line-height: 28px;
} */
.dialog_detail {
  width: 420px;
}
.dialog_detail1 {
  width: 180px !important;
}

.save {
  position: relative;
  left: 310px;
  bottom: 0px;
  /* margin-bottom: 30px; */
}
/* 验证规则错误后的小字样式
 ルールミスを検証した後の小さな文字パターン*/
:deep(.el-form-item__error) {
  width: 100%;
}
.save1 {
  position: relative;
  left: 225px;
  top: -25px;
  margin-top: 15px;
}
:deep(.el-input--medium .el-input__icon) {
  line-height: 35px;
}
/* :deep(.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before) {
  content: '';
} */
:deep(.el-form-item__label) {
  width: 180px !important;
}
:deep(#timewidth .el-form-item__label) {
  width: 70px !important;
}
</style>
